You have seen the effect of a button image that changes when the mouse moves over it. For example:
or 
This effect is realized with the help JavaScript. The script consists of two parts. The first part is inserted in
HTML within the page heading (before </head>). The second part it is used to show how many images will be
used. In the example below, change the red text to your values.
First part (before </head>):
<SCRIPT LANGUAGE="JavaScript">
<!--//
browser_name = navigator.appName;
browser_version = parseFloat(navigator.appVersion);
if (browser_name == "Netscape" && browser_version >= 3.0) { roll = 'true'; }
else if (browser_name == "Microsoft Internet Explorer" && browser_version >= 3.0) { roll = 'true'; }
else { roll = 'false'; }
function over(img,ref) { if (roll == 'true') { document.images[img].src = ref; } }
function out(img,ref) { if (roll == 'true') { document.images[img].src = ref; } }
if (roll == 'true')
{
a1=new Image;a1.src="image1.gif";
a2=new Image;a2.src="image2.gif";
...
aX=new Image;aX.src="imageX.gif";
}
//-->
</SCRIPT>
At the end of this part of script, all images for the button are loaded. It is necessary load both the pressed and unpressed buttons (images).
...
aX=new Image;aX.src="imageX.gif";
These two strings show the fact that it is necessary to register loading of all pictures. In a working script, the X would represent the number of the image
Second part (after <body>):
<A HREF="page.htm" onMouseOver="over('image_name','image2.gif');"
onMouseOut="out('image_name','image1.gif');"><img name="image_name" alt="ªõú¸ª" src="image1.gif" width=x height=y border="0"></A>
Designations:
page.htm - Link file name.
image_name - Picture name. It is necessary that JavaScript knows the name of each picture ( all pictures
must use a separate name).
image1.gif - File name of the unpressed button.
image2.gif - File name of pressed button (will replace image1.gif when the mouse moves over it).